<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    message:{{message}}<br>
    修改message:<input v-model="message"><br>
    <h3>第一次调用</h3>
    <!-- methods 调用 的方法 加（） -->
    methods-toUpper1：{{toUpper1()}}<br>
    <!--
          methods 调用 的方法   不加（）
    -->
    computed-toUpper2：{{toUpper2}}<br>

    <h3>第二次调用</h3>
    <!--methods 调用的方法加（）-->
    methods-toUpper1:{{toUpper1()}}
    <!--methods 调用的方法不加()-->
    computed-toUpper2：{{toUpper2}}<br>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello'
        },
        methods: {
            toUpper1: function () {
                // 将message 转变为大写 + 随机数
                return this.message.toLocaleUpperCase() + "----" + Math.random();
            }
        },
        computed: {
            // 计算属性，第一次加载，还有对应的方法，依赖的data 发生变化时，会重新计算（无论调用多少次，只计算一次）
            toUpper2: function () {
                // 将message 转变为大写 + 随机数
                return this.message.toLocaleUpperCase() + "--" + Math.random();
            }
        }
    });
</script>
</body>
</html>